<template>
  <!-- 生产追溯报表 -->
  <div class="page-container">
    <div class="common-content-wrap">
      <TrTable
        v-model="searchParams"
        :btnList="btnList"
        :searchShowList="searchShowList"
        :searchHideList="searchHideList"
        :expandObj="expandObj"
        :tableData="tableData"
        :tableColumn="tableColumn"
        :total="totalNum"
        rowKeyStr="packageLabelId"
        requestName="getList"
        @rowView="viewHandle($event)"
        @export="exportHandle"
        @rowViews="rowViewsHandle"
      />
    </div>
    <TrDetail
      v-model="isShowDetailPopup"
      :leftList="detailList"
      statusModel="hidden"
      :detailData="detailData"
      :width="1227"
      :isNeedFooter="false"
    >
      <template #bomTable>
        <TrTable
          v-show="currentDetail == 'isOne'"
          isPopup
          v-model="detailSearchOneParams"
          :total="detailTotalNum"
          :tableData="detailTableData"
          :tableColumn="detailTableColumnOne"
          requestName="detailSearchOneHandle"
        />
        <TrTable
          v-show="currentDetail == 'isTwo'"
          isPopup
          v-model="detailSearchTwoParams"
          :total="detailTotalNum"
          :tableData="detailTableData"
          :tableColumn="detailTableColumnTwo"
          requestName="detailSearchTwoHandle"
        />
      </template>
    </TrDetail>
  </div>
</template>

<script>
import {
  getList,
  getDetail,
  getChildDetail,
} from "@/api/report/productionTraceability.js";
import TrDetail from "@/components/Tr-detail/Tr-detail.vue";
import TrTable from "@/components/Tr-table/Tr-table.vue";

export default {
  name: "putMaterialReport",
  components: {
    TrTable,
    TrDetail,
  },
  data: () => ({
    btnList: [
      // {
      //   label: "导出",
      //   option: "export",
      //   color: "blue",
      // },
    ],
    totalNum: 0,
    isShowDetailPopup: false,
    tableData: [],
    searchParams: {
      current: 1,
      size: 10,
    },
    searchHideList: [
      {
        id: "packageCode",
        label: "包装标签",
        type: "input",
        value: "",
        width: 33.3,
      },
      {
        id: "materialCode",
        label: "成品料号",
        type: "input",
        value: "",
        width: 33.3,
      },
      {
        id: "workOrderCode",
        label: "生产工单",
        type: "input",
        value: "",
        width: 33.3,
      },
    ],
    searchShowList: [
      {
        isNeed: true,
        startStr: "createTimeStart",
        endStr: "createTimeEnd",
        id: "createdTime",
        type: "daterange",
        width: 80,
        label: "创建时间",
        value: [],
        radio: 1,
        timePeriod: true,
      },
    ],
    tableColumn: [
      {
        columnType: "expand",
        width: 60,
      },
      {
        type: "text",
        label: "包装标签",
        value: "packageCode",
      },
      {
        type: "text",
        label: "包装时间",
        value: "createTime",
      },
      {
        type: "text",
        label: "包装人员",
        value: "createUserName",
      },
      {
        type: "text",
        width: 200,
        label: "合计包装",
        value: "totalMaterial",
      },
      {
        type: "text",
        label: "成品料号",
        value: "materialCode",
      },
      {
        type: "text",
        label: "成品名称",
        value: "materialName",
      },
      {
        type: "text",
        label: "生产工单",
        value: "workOrderCode",
      },
      {
        type: "option",
        label: "操作",
        fixed: "right",
        width: 80,
        showBtnList: [
          {
            label: "查看",
            option: "rowView",
          },
        ],
      },
    ],
    expandObj: {
      isNeedIndex: false,
      tableColumn: [
        {
          type: "text",
          label: "容器编号",
          value: "containerCode",
        },
        {
          type: "option",
          label: "操作",
          showBtnList: [
            {
              label: "查看",
              option: "rowViews",
            },
          ],
        },
      ],
      rowKeyStr: "packageLabelId",
    },
    currentDetail: "isOne",
    detailTotalNum: 0,
    detailTableData: [],
    detailData: {},
    detailSearchOneParams: {
      workOrderId: "",
      current: 1,
      size: 10,
      workOrderCode: "",
    },
    detailSearchTwoParams: {
      containerPrefix: "",
      current: 1,
      size: 10,
      containerCode: "",
    },
    detailListOne: [
      {
        type: "text",
        id: 1,
        label: "基础信息",
        list: [
          {
            text: "包装标签",
            id: "packageCode",
            width: 33.33,
          },
          {
            text: "成品料号",
            id: "materialCode",
            width: 33.33,
          },
          {
            text: "成品名称",
            id: "materialName",
            width: 33.3,
          },
          {
            text: "生产工单",
            id: "workOrderCode",
            width: 33.33,
          },
        ],
      },
      {
        type: "slot",
        slotName: "bomTable",
        label: "标签明细",
        slotBottom: 32,
      },
    ],
    detailTableColumnOne: [
      {
        type: "text",
        label: "物料标签",
        value: "barcode",
      },
      {
        type: "text",
        label: "原料料号",
        value: "materialCode",
      },
      {
        type: "text",
        label: "原料名称",
        value: "materialName",
      },
      {
        type: "text",
        label: "投料机台",
        value: "machineCode",
      },
      {
        type: "text",
        label: "投料人",
        value: "createUserName",
      },
      {
        type: "text",
        label: "投料时间",
        value: "createTime",
      },
      {
        type: "text",
        label: "供应商",
        value: "supplierName",
      },
    ],
    detailListTwo: [
      {
        type: "text",
        id: 1,
        label: "基础信息",
        list: [
          {
            text: "包装标签",
            id: "packageCode",
            width: 33.33,
          },
          {
            text: "成品料号",
            id: "materialCode",
            width: 33.33,
          },
          {
            text: "成品名称",
            id: "materialName",
            width: 33.3,
          },
          {
            text: "生产工单",
            id: "workOrderCode",
            width: 33.33,
          },
          {
            text: "容器编号",
            id: "containerCode",
            width: 33.33,
          },
        ],
      },
      {
        type: "slot",
        slotName: "bomTable",
        label: "标签明细",
        slotBottom: 32,
      },
    ],
    detailTableColumnTwo: [
      {
        type: "text",
        label: "容器编号",
        value: "containerCode",
      },
      {
        type: "text",
        label: "工序",
        value: "processName",
      },
      {
        type: "text",
        label: "机台号",
        value: "machineCode",
      },
      {
        type: "text",
        label: "上料数量",
        value: "loadingNum",
      },
      {
        type: "text",
        label: "数量单位",
        value: "loadingNumUnit",
      },
      {
        type: "text",
        label: "下料数量",
        value: "blankingNum",
      },
      {
        type: "text",
        label: "数量单位",
        value: "blankingNumUnit",
      },
      {
        type: "text",
        label: "上料时间",
        value: "loadingPutMaterialTime",
      },
      {
        type: "text",
        label: "下料时间",
        value: "blankingPutMaterialTime",
      },
      {
        type: "text",
        label: "层厚",
        value: "thickness",
      },
      {
        type: "text",
        label: "打印时长",
        value: "printTime",
      },
    ],
  }),
  computed: {
    detailList() {
      return this.currentDetail == "isOne"
        ? this.detailListOne
        : this.detailListTwo;
    },
  },
  methods: {
    async getList() {
      const { data: res } = await getList(this.searchParams);
      this.$validateData(res.data.records);
      this.tableData = res.data.records.map((item) => {
        return {
          ...item,
          expandChildren: item.packageContainerList,
          totalMaterial: `${item.totalNum}${item.totalNumUnitCode}(${item.totalNumUnitName})/${item.totalWeight}${item.totalWeightUnitCode}(${item.totalWeightUnitName})`,
        };
      });
      this.totalNum = res.data.total;
    },
    exportHandle() {
      return this.$message.warning("暂未开发");
      // this.$exportHandle({ vm: this, params: this.searchParams });
    },
    async rowViewsHandle(type, val) {
      this.currentDetail = "isTwo";
      this.detailIsNeedPagination = false;
      let parentVal = this.tableData.find(
        (item) => item.packageLabelId == val.packageLabelId
      );
      this.detailData = { ...val, ...parentVal };
      console.log(this.detailData);
      await this.getChildDetail();
      this.isShowDetailPopup = true;
      console.log(type, val, ">>>>>>>>>>");
    },
    async viewHandle(val) {
      this.currentDetail = "isOne";
      this.detailIsNeedPagination = true;
      this.detailData = val;
      await this.getDetail();
      this.isShowDetailPopup = true;
    },
    async getChildDetail() {
      this.detailSearchTwoParams.containerPrefix =
        this.detailData.containerPrefix;
      this.detailSearchTwoParams.containerCode = this.detailData.containerCode;
      const { data: res } = await getChildDetail(this.detailSearchTwoParams);
      this.$validateData(res.data);
      console.log("ta====>", res);
      this.detailTableData = res.data.map((item) => ({
        ...item,
        loadingNumUnit: `${item.loadingNumUnitCode}(${item.loadingNumUnitName})`,
        blankingNumUnit: `${item.blankingNumUnitCode}(${item.blankingNumUnitName})`,
      }));
    },
    async getDetail() {
      this.detailSearchOneParams.workOrderId = this.detailData.workOrderId;
      this.detailSearchOneParams.workOrderCode = this.detailData.workOrderCode;
      const { data: res } = await getDetail(this.detailSearchOneParams);
      this.$validateData(res.data.records);
      console.log("ta====>", res);
      this.detailTotalNum = res.data.total;
      this.detailTableData = res.data.records;
    },
    detailSearchOneHandle() {
      this.getDetail();
    },
    detailSearchTwoHandle() {
      this.getChildDetail();
    },
  },
};
</script>
